import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Checkbox, Space } from 'antd'
import PropTypes from 'prop-types'
import moment from 'moment'
import style from './ListItem.module.less'

class ListItem extends Component {
  changeChecked (checked) {
    const d = this.props.data
    this.props.onChange(checked, d)
  }

  // 查看案件详情
  openDetail (data) {
    this.props.addWindow({ id: `CaseDetail-${data.id}`, title: `案件详情-${data.caseno_desc || data.acceptno_desc || data.case_no || data.accept_no || data.serial_no}`, componentName: 'CaseDetail', forceRefresh: true, meta: { id: data.id } })
  }

  // 格式化时间
  formatDate (v) {
    return v ? moment(v * 1000).format('YYYY-MM-DD') : ''
  }

  // 获取名称
  getNames (list) {
    return list.map(li => li.name).join('、')
  }

  render () {
    const checked = this.props.checked
    const d = this.props.data || {}
    const s = [style['list-li']]
    if (checked) {
      s.push(style.active)
    }
    const applicants = this.getNames((d.applicants || []).filter(li => li.status)) || '无'
    const respondents = this.getNames((d.respondents || []).filter(li => li.status)) || '无'
    return (
      <div className={s.join(' ')}>
        <div className={style['list-li-cell']} style={{ width: '5%' }}>
          <Checkbox checked={checked} onChange={d => this.changeChecked(d.target.checked)} />
        </div>
        <div className={style['list-li-cell']} style={{ width: '10%' }}>{d.acceptno_desc}</div>
        <div className={style['list-li-cell']} style={{ width: '10%' }}>{d.caseno_desc}</div>
        <div className={style['list-li-cell']} style={{ width: '10%' }}>{this.formatDate(d.accept_datetime)}</div>
        <div className={style['list-li-cell']} style={{ width: '22.5%' }} title={applicants}>{applicants}</div>
        <div className={style['list-li-cell']} style={{ width: '22.5%' }} title={respondents}>{respondents}</div>
        <div className={style['list-li-cell']} style={{ width: '10%' }}>{d.processer}</div>
        <div className={style['list-li-cell']} style={{ width: '10%' }}>
          <Space size='middle'>
            {this.props.removeAble && this.props.editable ? <span className={style['link-del-btn']} onClick={() => this.props.removeHandle(d)}>移除</span> : null}
            <span className={style['link-btn']} onClick={() => this.openDetail(d)}>详情</span>
          </Space>
        </div>
      </div>
    )
  }
}

ListItem.propTypes = {
  data: PropTypes.object,
  checked: PropTypes.bool,
  onChange: PropTypes.func,
  removeAble: PropTypes.bool,
  removeHandle: PropTypes.func,
  editable: PropTypes.bool
}

ListItem.defaultProps = {
  data: {},
  checked: false,
  onChange: () => {},
  removeAble: false,
  removeHandle: () => {},
  editable: false
}

const mapState = mapStateToProps(function (state) {
  return {
    userInfo: state.basic.userInfo
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {
  }
})

export default connect(mapState, mapDispatch)(ListItem)
